<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <title>Document</title>
</head>

<body>
    <!-- v-model 双向绑定-用户需要填写 点击 选择 这些操作使用双向绑定  在表单元素中使用较多-->
    <!-- v-bind  属性绑定(单相绑定) 类名 索引 自定义属性 -->
    <div id='app'>
        <input type="text" v-model="inputmsg">{{inputmsg}}
        <hr>
        <textarea v-model="msg"></textarea>{{msg}}
        <hr>
        <input type="radio" v-model="sex" value="0" />男
        <input type="radio" v-model="sex" value="1" />女{{sex}}
        <hr>
        <!-- 复选框 单个情况  单个复选框,绑定布尔值 -->
        <input type="checkbox" v-model="check1" />{{check1}}
        <hr>
        <!-- 复选框 对个复选框,绑定到数组 -->
        <input type="checkbox" v-model="hobby" value="one">帅
        <input type="checkbox" v-model="hobby" value="two">美
        <input type="checkbox" v-model="hobby" value="three">丑{{hobby}}
        <hr>
        <!-- 下拉列表 选中单个绑定到option项具体的值-->
        <select v-model="language">
            <option value="0">语言</option>
            <option value="1">英语</option>
            <option value="2">日语</option>
            <option value="3">韩语</option>
            <option value="4">泰语</option>
        </select>
        {{language}}
        <!-- 下拉列表 选中多个绑定数组,option项具体的值会存到数组中 multiple多选属性-->
        <select v-model="language2" multiple>
            <option value="1">英语</option>
            <option value="2">日语</option>
            <option value="3">韩语</option>
            <option value="4">泰语</option>
        </select>
        {{language2}}
    </div>
    <script src='../js/vue.js'></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                msg: 123,
                inputmsg: '千里莺啼绿映红',
                sex: '',
                check1: false,
                hobby: [],
                language: 0,
                language2: []
            },
            methods: {},
        })
    </script>
</body>

</html>